<template>
    <div class="type-list-box">
        <slot name="title"></slot>
        <div class="type-list">
            <div class="item" 
                v-for="(item, index) in items" 
                :key="'maintypes'+index"
                :style="'width:'+(100/rowNum)+'%;'"
                @click="gotoSearch(item.link,item.title)"
            >
                <div class="type-img">
                    <img :src="item.image" />
                </div>
                <div class="type-name" :style=" {color:item.titleColor} ">{{ item.title }}</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        items: {
            type: Array,
            default: () => {
                return [];
            }
        },
        rowNum: {
            type: Number,
            default: 5
        }
    },
    methods:{
        gotoSearch(link,name){
            let fcid = decodeURI(link).match(/fcid=([^&]*)/);
            let title = decodeURI(link).match(/title=([^&]*)/);
            if(fcid&&title){
                this.$router.push({
                    name:"list",
                    params:{
                        fcid:fcid[1],
                        title:title[1]
                    }
                })
            }else{
                this.$router.push({
                    name:"list",
                    query:{
                       q:name
                    }
                })
            }

        }
    }
};
</script>
<style lang="less" scoped>
.type-list-box {
    width: 100%;
    // margin-bottom: @box-bottom-margin;
    .type-list {
        display: flex;
        flex-flow: row wrap;
        padding: 0px @padding-size;
        .item{
            box-sizing: border-box;
            padding: 0px @padding-size @padding-size*2;
            text-align: center;
        }
        .type-img{
            width: 100%;
            padding-top: 100%;
            // background-color: @de;
            position: relative;
            img{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
            }
        }
        .type-name{
            width: 100%;
            margin-top: 10px;
            font-size: 24px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>
